<!DOCTYPE html>
<!-- saved from url=(0052)https://getbootstrap.com/docs/4.0/examples/checkout/ -->
<html lang="en">

<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../static/images/i-nice-logo.svg">

    <title>running configuration-inice</title>
    <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/checkout/">

    <!-- Bootstrap core CSS -->
    <link href="../static/running_config/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../static/running_config/form-validation.css" rel="stylesheet">
   <link href="../static/css/main.css" rel="stylesheet">
     <script src="../static/js/5ec65ef964.js"></script>
        <script src="../static/js/main.js"></script>
  </head>


  <body>


   <div class="all-content">


        <!-- sidebar links left -->
        <div class="sidebar">
            <h2><img src="../static/images/i-nice-logo.svg" height="100px"></h2>
            <ul>
                 <li><a href=""><i class="fas fa-home"></i>Home</a></li>
                <li style="background: #C88D33"><a href="{{ url_for('ac.running_config') }}"><i class="fas fa-flask"></i>Configurations</a></li>
                <li><a id="sidebardataset"><i class="fas fa-chart-bar" onclick="testclick()"></i>Dataset Details</a></li>
                <li><a id="sidebarresult"><i class="fas fa-tree"></i>Results</a></li>
                <li><a href="{{ url_for('ac.show_config') }}"><i class="fas fa-flask"></i>Simple Configurations</a></li>
                <li><a id="sidebarsimre"><i class="fas fa-flask"></i>Simple Results </a></li>
            </ul>

            <!-- sidebar links footer tag starts here -->
            <div class="footer_tag">
                <a href="">Copyright Inice visualization 2020</a>

                <!-- sidebar links footer tag ends here -->
            </div>


            <!-- sidebar links left tag ends here -->
        </div>

        <!-- main content on the right starts here-->
        <div class="main-content">

            <div id="process_visualization">
                <p><a href="" onclick="CloseProcess()">X</a> </p>
                <img src="../static/images/data1.gif" alt="Process Visualization"/>


            </div>

            <!-- top welcome message -->
            <div class="header">
                <h1 align="center">
                    Welcome to Inice Visualization Platform
                </h1>

                <p align="right" style="margin-right: 30px;" id="close_process" onclick="CloseProcess()">
                    <a href="logout">logout</a>
                </p>

            </div>

<!--            <div class="infoUp">-->
<!--                <h4>Configuration Name: <input type="text" name="" id="configNameInput" > </h4>-->
<!--            </div>-->

            <div class="info">


              <div class="info1" style="background: white;">
                  <div style="margin-top: 30px;">&nbsp;</div>

                <div class="container">

<!--============================================================================================== ONE -->
                         <div class="row">
                             <div class="col-md-12 order-md-1">
                                      <!-- <h4 class="mb-3">Billing address</h4> -->
                                  <form action="run_results" class="needs-validation" novalidate="" method="POST" onkeypress="return event.keyCode != 13;">
                                  <div class="row">
                                      <div class="col-md-6 mb-3">
                                             <label for="configName">Input desired name for this run task:</label>
                                                 <input type="text" class="" name="configName" id="configName" placeholder="" value="" required="" style="padding-left: 15px;">
                                                    <div class="invalid-feedback">
                                                        Valid first name is required.
                                                    </div>
                                      </div>

              <script src="../static/running_config/jquery-3.5.1.js"></script>
              <script type="text/javascript">
                $('#configName').on('change', function(){
                  $('#configNameInput').val($(this).val());
                })
              </script>

              <div class="col-md-6 mb-3">
                <label for="oldRunningConfig">Copy the configurations of history run tasks (Optional):</label>
                <select class="custom-select d-block w-100" name="oldRunningConfig" id="oldRunningConfig">
                  <option value="">Choose...</option>
                {% block page_content %}
                  {% for row in oldConfigNameList %}
                  <option value={{ row[0] }}>#{{ row[0] }}--{{ row[1] }}</option>
                  {% endfor %}
                  {% endblock %}
                </select>
              </div>
            </div>
<!--=======================================-->
            <script src="../static/running_config/jquery-3.5.1.js"></script>
            <script type="text/javascript">
              $('#oldRunningConfig').on('change', function(){
                $.ajax({
                      type:"POST",
                      url:"/running_config",
                      dataType:"json",
                      data:{
                          "oldConfigId": $(this).val()
                       },
                      success:function(data){
                          // alert("POST:"+JSON.stringify(data));
                          $('#dataset').val(data['datasetId']);
                          $('#obGen').val(data['obGen']);
                          $('#numOfOb').val(data['numOfOb']);
                          $('#numOfOb').change(); //
                          $('#dataset').change(); //
                          // set table value
                          for(var i=1; i<=$('#numOfOb').val(); i++){
                            $('#p2pDis'+i).val(data['obDetail'][i-1][0]);
                            $('#n2nDis'+i).val(data['obDetail'][i-1][1]);
                            $('#estimator'+i).val(data['obDetail'][i-1][2]);
                          }
                      },
                      error:function(jqXHR){
                          alert("Error");
                      }
                  });
              })
            </script>
<!--============================================================================================Make Modification-->
            <div class="mb-3">
              <hr class="mb-4">
              <div class="mb-3">
                <h4 class="mb-3">Modify configuration:</h4>
              </div>
              <label for="dataset">Dataset</label>
              <div class="datasetselect" style="display: flex;">
                  <select class="custom-select d-block w-100" name='dataset' id="dataset" required="">
                    <option value="">Choose...</option>
                    {% for row in datasetNameList %}
                    <option value={{row[0]}}>#{{row[0]}}--{{row[1]}}</option>
                    {% endfor %}
                 </select>
              <a class="uploadfile" style="background-color: #3372fc; color:#ffffff; margin: 0 0 0 20px;position: relative;
              cursor: pointer; height: 40px; border-radius: 10px;width: 150px;overflow: hidden;display: inline-block;
              line-height: 40px;text-align: center;font-weight: 400">
                  <input type="file" style="opacity: 0; position: absolute;right: 0;top: 0;cursor: pointer;width: 250px;">Upload Dataset
              </a>
              </div>
              <div class="invalid-feedback">
                Please select a valid option.
              </div>
            </div>

            <div class="mb-3">
              <label for="obGen">Observer Generator</label>
              <select class="custom-select d-block w-100" name='obGen' id="obGen" required="">
                <option value="">Choose...</option>
                <option>EdgeObserverGenerator</option>
                <option>SimpleObserverGenerator*</option>
                <option>HistoryObserverGenerator*</option>
              </select>
              <div class="invalid-feedback">
                Please select a valid option.
              </div>
            </div>

            <div class="mb-3">
              <label for="numOfOb">Number of observers</label>
              <input type="number" min="1" class="form-control" name="numOfOb" id="numOfOb" placeholder="Please input NUMBER" required="">
              <div class="invalid-feedback">
                Your input is required.
              </div>
            </div>

            <div class="row">

              <div class="col-md-6 mb-3">
                <label for="p2pDisAll">One2OneDistance for all observers</label>
                <select class="custom-select d-block w-100" name='p2pDisAll' id="p2pDisAll">
                  <option value="">Choose...</option>
                  <option>One2OneDistance</option>
                    <option>EuclideanDistance*</option>
                    <option>Manhattan Distance*</option>
                </select>
              </div>

              <div class="col-md-6 mb-3">
                <label for="n2nDisAll">N2NDistances for all observers:</label>
                <select class="custom-select d-block w-100" name='n2nDisAll' id="n2nDisAll">
                  <option value="">Choose...</option>
                  <option>N2NDistances</option>
                <option>EuclideanDistance*</option>
                <option>Manhattan Distance*</option>
                </select>

              </div>
            </div>

            <script type="text/javascript">
              $('#p2pDisAll').on('change', function(){
                for(var i=1; i<=$('#numOfOb').val(); i++){
                  $('#p2pDis'+i).val($('#p2pDisAll').val());
                }
              })
              $('#n2nDisAll').on('change', function(){
                for(var i=1; i<=$('#numOfOb').val(); i++){
                  $('#n2nDis'+i).val($('#n2nDisAll').val());
                }
              })
            </script>
<!--=================>==================================================================================THREE THREE-->
                                  <p>&nbsp;</p>
            <hr class="mb-4">
              <table  border="0" id="table">
                <thead>
                  <th>#Ob</th>
                  <th>One2OneDistance</th>
                  <th>N2NDistances</th>
                  <th>Cluster Estimator</th>
                  <th>Filter Configuration</th>
                </thead>
                <tbody id="tbody"></tbody>
              </table>

              <script>
              $(document).ready(function () {
                $("#numOfOb").change(function () {
                    $("#tbody").empty();
                    for(var i=1; i<=$('#numOfOb').val(); i++) {
                        var tr = document.createElement("tr"),
                            td1 = document.createElement("td"),
                            td2 = document.createElement("td"),
                            td3 = document.createElement("td"),
                            td4 = document.createElement("td"),
                            td5 = document.createElement("td");
                        td1.innerHTML = i;
                        td2.innerHTML = "<select name=\"p2pDis" + i +"\" id=\"p2pDis" + i +"\"><option>One2OneDistance</option></select>";
                        td3.innerHTML = "<select name=\"n2nDis" + i +"\" id=\"n2nDis" + i +"\"><option>N2NDistances</option></select>";
                        td4.innerHTML = "<select name=\"estimator" + i +"\" id=\"estimator" + i +"\"><option>GaussianClustersEstimatorBy1D</option><option>GammaClustersEstimatorBy1D*</option></select>";
                        td5.innerHTML = "<input name=\"estimatorConfigId" + i + "\"  min=\"1\" id=\"estimatorConfigId" + i +"\" placeholder=\"DensitiPeakFilter,0.9;\" >";

                        tr.appendChild(td1);
                        tr.appendChild(td2);
                        tr.appendChild(td3);
                        tr.appendChild(td4);
                        tr.appendChild(td5);

                        var tbody = document.getElementById("tbody");
                        tbody.appendChild(tr);
                    }
                })
              })
              </script>

<!--==============================================================================================SUMMARY OF DATASET -->
                                        <p>&nbsp;</p>
            <table><tr><td><h4>Summary of dataset:&nbsp;&nbsp;</h4></td><td  id="datasetName"></td></tr></table>
            <div class="col-md-12 mb-3">
              <div class="jumbotron mt-3">
                <h6>Class Name:&nbsp;&nbsp;<h7 id="className"></h7></h6>
                <h6>Number of Rows:&nbsp;&nbsp;<h7 id="nRows"></h7></h6>
                <h6>Number of Columns:&nbsp;&nbsp;<h7 id="nCols"></h7></h6>
                <h6>Number of Clusters:&nbsp;&nbsp;<h7 id="nClusters"></h7></h6>
{#                <h6>Estimated Clusters Accuracy:&nbsp;&nbsp;<h7 id="accuracy"></h7></h6>#}
                <div id="detailPageRedirect">
                  <a target="_blank" href="./dataset_detail?id=" >More...</a>
                </div>
              </div>
            </div>

            <script>
              $("#sidebardataset").click(function (){
                  var old_sidedir = document.getElementById("sidebardataset");
                  if(old_sidedir.href==""){
                      alert("Please select the dataset first!")
                  }
              });
              $("#sidebarresult").click(function () {
                  var old_sideresult = document.getElementById("sidebarresult");
                  if(old_sideresult.href==""){
                      alert("Please run config first!")
                  }
              });
              $("#sidebarsimre").click(function () {
                  var old_sidesimre = document.getElementById("sidebarsimre");
                  if(old_sidesimre.href==""){
                      alert("Please enter the page via simple config!")
                  }
              });
              $("#dataset").change(function () {
                $.ajax({
                      type:"POST",
                      url:"/running_config",
                      dataType:"json",
                      data:{
                        "datasetId": $(this).val()
                       },
                      success:function(data){
                        $("#datasetName").empty();
                        $("#className").empty();
                        $("#nRows").empty();
                        $("#nCols").empty();
                        $("#nClusters").empty();
                        $("#accuracy").empty();

                        var td = document.createElement("h7"),
                            h71 = document.createElement("h7"),
                            h72 = document.createElement("h7"),
                            h73 = document.createElement("h7"),
                            h74 = document.createElement("h7"),
                            h75 = document.createElement("h7");

                        td.innerHTML = data["datasetName"];
                        h71.innerHTML = data["className"];
                        h72.innerHTML = data["nRows"];
                        h73.innerHTML = data["nCols"];
                        h74.innerHTML = data["nClusters"];
                        h75.innerHTML = "(wait for implementation)";

                        var head = document.getElementById("datasetName"),
                            attr1 = document.getElementById("className"),
                            attr2 = document.getElementById("nRows"),
                            attr3 = document.getElementById("nCols"),
                            attr4 = document.getElementById("nClusters");
                            {#attr5 = document.getElementById("accuracy");#}

                        head.appendChild(td);
                        attr1.appendChild(h71);
                        attr2.appendChild(h72);
                        attr3.appendChild(h73);
                        attr4.appendChild(h74);
                        {#attr5.appendChild(h75);#}
                        // update the redirect url
                        var a = document.createElement("a");
                        a.innerHTML = "<a target=\"_blank\" href=\"./dataset_detail?id=" + $("#dataset").val() + "\" >More...</a>";
                        $("#detailPageRedirect").empty();
                        var old_redir = document.getElementById("detailPageRedirect");
                        var old_sidedir = document.getElementById("sidebardataset");
                        old_redir.appendChild(a);
                        old_sidedir.href = "./dataset_detail?id=" + $("#dataset").val();
                      },
                      error:function(jqXHR){
                          alert("Error")
                      }
                      });
              })
              </script>


            <button class="btn btn-primary btn-lg btn-block" type="submit" onclick="process()">Start To Run</button>
          </form>
        </div>
      </div>

      <footer class="my-5 pt-5 text-muted text-center text-small">
        <p class="mb-1">© Copyright-2020 Big Data Institute Shenzhen University</p>
        <ul class="list-inline">
          <li class="list-inline-item"><a href="#">Privacy</a></li>
          <li class="list-inline-item"><a href="#">Terms</a></li>
          <li class="list-inline-item"><a href="#">Support</a></li>
        </ul>
      </footer>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
<!--    <script src="../static/running_config/jquery-3.2.1.slim.min.js.download" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>-->
<!--    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>-->
                         <script src="../static/running_config/popper.min.js.download"></script>
                        <script src="../static/running_config/bootstrap.min.js.download"></script>
                        <script src="../static/running_config/holder.min.js.download"></script>
                         <script>
                          // Example starter JavaScript for disabling form submissions if there are invalid fields
                         (function() {
                          'use strict';

                            window.addEventListener('load', function() {
                               // Fetch all the forms we want to apply custom Bootstrap validation styles to
                             var forms = document.getElementsByClassName('needs-validation');

                              // Loop over them and prevent submission
                            var validation = Array.prototype.filter.call(forms, function(form) {
                             form.addEventListener('submit', function(event) {
                             if (form.checkValidity() === false) {
                             event.preventDefault();
                               event.stopPropagation();
                                 }
                                 form.classList.add('was-validated');
                              }, false);
                                  });
                            }, false);
                              })();
                           </script>

                        <style>
                            .tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;border-left: 1px solid #FFF;border-bottom: 1px solid #fff;}
                            .tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 !important;}
                            .ws_toolbar {z-index:100000}
                            .ws_toolbar .ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px}
                            .tb_highlight{background-color:yellow}
                            .tb_hide {visibility:hidden}
                            .ws_toolbar img {padding:2px;margin:0px}
                        </style>



              </div>

            </div>
        </div>





        <!-- all content tag ends here -->




   </div>

<script src="../static/js/main.js"></script>
  </body>
</html>